<template>
  <view class="container" :style="appThemeStyle">
    <u-search
      placeholder="请输入编码/条码/名称查询"
      @search="onSearch"
      @custom="onClear"
      @clear="onSearch"
      action-text="取消"
      :show-action="true"
      v-model="searchValue"
      :animation="true"
      focus
    />
    <view class="title">商户</view>
    <view
      :class="['tenants-item', { active: item.id === selectTenantId }]"
      v-for="(item, index) in tenantList"
      :key="index"
      @click="onSelectTenants(item)"
    >
      <view class="area">
        <image :src="$image('/storeminiapp/icon_tenant.png')"></image>
        <text>{{ item.name }}</text>
      </view>
      <view class="iconfont selected" v-if="item.id === selectTenantId">&#xe6ad;</view>
    </view>
  </view>
</template>

<script>
import store from '@/store'

export default {
  data() {
    return {
      selectTenantId: -1,
      searchValue: '',
      tenantList: []
    }
  },
  computed: {
    tenants() {
      return store.getters.tenants
    },
    tenant() {
      return store.getters.tenant
    },
  },
  onLoad() {
    this.tenantList = this.tenants
    this.selectTenantId = this.tenant?.id
  },
  methods: {
    onSelectTenants(item) {
      this.selectTenantId = item.id
      uni.navigateBack({
        delta: 1, // 返回上一页
        success: () => {
          // 在上一页可以通过 this.$route.params 访问到传递的数据
          uni.$emit('searchTenantId', this.selectTenantId)
        }
      })
    },
    onSearch() {
      this.tenantList = this.tenants
      if (this.searchValue) {
        this.tenantList = this.tenantList.filter(item => item?.name.includes(this.searchValue))
      }
    },
    onClear() {
      this.searchValue = ''
      this.onSearch()
    }
  }
}
</script>

<style>
page {
    background: #ffffff;
}
</style>

<style lang="scss" scoped>
.container {
  padding: 24rpx;

  .title {
    font-size: 28rpx;
    color: #333333;
    margin: 36rpx 0 24rpx;
    font-weight: bold;
  }

  .tenants-item {
    padding: 24rpx 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #EEEEEE;
    border-radius: 16rpx;
    margin-bottom: 24rpx;
    font-size: 26rpx;

    &.active {
      border: 2rpx solid #2D71FD;
    }

    .area {
      display: flex;
      align-items: center;

      image {
        width: 40rpx;
        height: 40rpx;
        margin-right: 12px;
      }
    }

    .selected {
      color: #2D71FD;
      font-size: 40rpx;
    }
  }
}
</style>
